<!-- 提现常见问题 -->
<template>
  <div class="faq-withdraw">
    <div class="col-222 bold f-24 lin-34">
      {{ $t('setting.withdrawFaqTitle') }}
    </div>
    <div class="mt-16 faq-list col-222 f-16 lin-22">
      <div class="mt-24" v-for="(item, index) in showList()" :key="index">
        <div class="flex a-s">
          <img class="faq-icon" src="@/assets/images/user/faq-q.png" alt="">
          <div class="pl-16 pt-8 f-1">
            {{ item.q }}
          </div>
        </div>
        <div class="flex a-s mt-8">
          <img class="faq-icon" src="@/assets/images/user/faq-a.png" alt="">
          <div class="pl-16 pt-8 f-1">
            {{ item.a }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 根据type判断是佣金还是余额提现，balance是余额，反之是佣金
    type: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      faqList: [
        {
          q: this.$t('setting.withdrawFaqQ1'),
          a: this.$t('setting.withdrawFaqA1')
        },
        {
          q: this.$t('setting.withdrawFaqQ2'),
          a: this.$t('setting.withdrawFaqA2')
        },
        {
          q: this.$t('setting.withdrawFaqQ3'),
          a: this.$t('setting.withdrawFaqA3')
        },
      ],
      proList: [
        {
          q: this.$t('setting.withdrawFaqQ1'),
          a: this.$t('setting.withdrawFaqA1')
        },
        {
          q: this.$t('setting.withdrawFaqQ3'),
          a: this.$t('setting.withdrawFaqA3')
        },
      ]
    }
  },
  methods: {
    showList() {
      return this.type == 'balance' ? this.faqList : this.proList;
    }
  }
}
</script>

<style lang="less" scoped>
.faq-withdraw {
  .faq-list {
    border-top: 1px solid #E2E2E2;

    .faq-icon {
      width: 40px;
      height: 40px;
    }
  }
}
</style>